<template>
	<div class="home-container">
		<a-layout id="components-layout-demo-custom-trigger">
			<a-layout-sider v-model="collapsed" :trigger="null" collapsible>
				<div class="logo">
					<h3>cloud-myblog-cms</h3>
				</div>
				<a-menu 
					theme="dark" 
					:default-selected-keys="selected" 
					mode="inline" 
					:default-open-keys="openKeys"
					@click="handleClick">
					<a-menu-item :key="1">
						<a-icon type="home" />
						首页
						<router-link :to="{name: 'Home'}"></router-link>
					</a-menu-item>
					<!-- 一级菜单 -->
					<a-sub-menu :key="item.id" v-for="item of menus">
						<template slot="title">
							<a-icon :type="item.type" />
							<span v-if="item.children !== null">{{item.authName}}</span>
							<span v-else @click="toHome">{{item.authName}}</span>
						</template>
						<!-- 二级菜单 -->
						<a-menu-item v-for="sub of item.children" :key="sub.id">
							<router-link :to="item.path + '/' + sub.path">
								<a-icon :type="sub.type" />
								<span>{{sub.authName}}</span>
							</router-link>
						</a-menu-item>
					</a-sub-menu>
				</a-menu>
			</a-layout-sider>
			<a-layout>
				<!-- 头部标签 -->
				<a-layout-header style="background: #fff; padding: 0">
					<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
						@click="() => (collapsed = !collapsed)" />
					<span class="title">
						{{title}}
					</span>
					<!-- 登录用户基本信息显示 -->
					<span class="login_avatar">
						<a-dropdown placement="bottomCenter">
							<a-avatar size="large" :src="avatar">
								<a-icon slot="icon" type="user" />
							</a-avatar>
							<a-menu slot="overlay">
								<a-menu-item>
									<a href="javascript:;" @click="updateAdminInfo()">个人信息</a>
								</a-menu-item>
								<a-menu-item>
									<a href="javascript:;" @click="logout">退出</a>
								</a-menu-item>
							</a-menu>
						</a-dropdown>
					</span>
				</a-layout-header>
				<!-- 用于显示页面 -->
				<a-layout-content
					:style="{ margin: '24px 16px', padding: '24px', minHeight: '280px' }">
					<router-view></router-view>
				</a-layout-content>
			</a-layout>
		</a-layout>
		<!-- 管理员修改个人信息 【后期修改补充上去】 -->
		<a-modal v-model="updateAdminModalVisible" title="修改个人信息" :footer="false">
			<p>修改个人信息</p>
		</a-modal>
	</div>
</template>
<script>
	// import {
	// 	logout
	// } from '../api/user.js'
	import menus from "@/assets/js/menu.js"
	export default {
		name: 'Home',
		data() {
			return {
				title: 'cloud-myblog 后台管理系统',
				updateAdminModalVisible: false,
				collapsed: false,
				avatar: '',
				// 侧边栏列表
				menus: [],
				openKeys: [1],
				rootSubmenuKeys: [100,200,300,400,500],
				selected: [1]
			};
		},
		mounted () {
			this.getMenuList()
			this.getLoginInfo()
			const keys = JSON.parse(sessionStorage.getItem('keys'))
			if (keys && keys.length > 1) {
				this.openKeys[0] = keys[1]
				this.selected[0] = keys[0]
			}
		},
		methods: {
			// 更新管理员个人信息
			updateAdminInfo () {
				this.updateAdminModalVisible = true
			},
			getLoginInfo () {
				this.avatar = JSON.parse(sessionStorage.getItem('adminInfo')).adminInfo.header
			},
			getMenuList() {
				this.menus = menus
			},
			handleClick(e) {
				// console.log('click ', e);
				sessionStorage.setItem('keys',JSON.stringify(e.keyPath))
			},
			// 处理退出登录
			async logout() {
				// const {
				// 	data: res
				// } = await logout()
				// if (res.code !== 20000)
				// 	return this.$message.error(res.msg)
				window.localStorage.clear()
				window.sessionStorage.clear()
				this.$router.push('/login')
				this.$message.success('退出成功')
			}
		}
	}
</script>

<style scoped="scoped">
	.title {
		font-family: "微软雅黑";
		font-weight: bold;
		font-size: 16px;
	}

	.login_avatar {
		float: right;
		margin-right: 80px;
	}

	.home-container {
		height: 100%;
	}

	.logo h3 {
		margin: 0 auto;
		color: #EEEEEE;
	}


	#components-layout-demo-custom-trigger {
		height: 100%;
	}

	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	#components-layout-demo-custom-trigger .logo {
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		margin: 16px;
	}
</style>
